<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-descriptions title="商户信息">
        <a-descriptions-item label="商户名称">{{ merchantDtl?.merchantName ?? '—' }}</a-descriptions-item>
        <a-descriptions-item label="联系人">{{ merchantDtl?.contactName ?? '—' }}</a-descriptions-item>
        <a-descriptions-item label="联系人手机号">{{ merchantDtl?.contactMobile ?? '—' }}</a-descriptions-item>
        <a-descriptions-item label="信用等级">{{ merchantDtl?.creditLevel ?? '—' }}</a-descriptions-item>
      </a-descriptions>
      <a-divider style="margin-bottom: 32px" />
      <a-descriptions title="客户经理信息">
        <a-descriptions-item label="姓名">{{ merchantDtl?.custUserName ?? '—' }}</a-descriptions-item>
        <a-descriptions-item label="手机号码">{{ merchantDtl?.custUserMobile ?? '—' }}</a-descriptions-item>
      </a-descriptions>
      <a-divider style="margin-bottom: 32px" />
      <a-descriptions title="合同信息">
        <a-descriptions-item label="合同数">{{ merchantDtl?.contractNums ?? '—' }}</a-descriptions-item>
        <a-descriptions-item label="总金额">{{ merchantDtl?.contractAmount ?? '—' }}元</a-descriptions-item>
        <a-descriptions-item label="还款金额">{{ merchantDtl?.contractRepaymentAmount ?? '—' }}元</a-descriptions-item>
        <a-descriptions-item label="逾期金额">{{ merchantDtl?.contractOverdueAmount ?? '—' }}元</a-descriptions-item>
        <a-descriptions-item label="冻结金额">{{ merchantDtl?.contractFreezeAmount ?? '—' }}元</a-descriptions-item>
      </a-descriptions>
      <a-divider style="margin-bottom: 32px" />
      <a-descriptions title="配资信息">
        <a-descriptions-item label="配资数">{{ merchantDtl?.capitalNums ?? '—' }}</a-descriptions-item>
        <a-descriptions-item label="总金额">{{ merchantDtl?.capitalAmount ?? '—' }}元</a-descriptions-item>
        <a-descriptions-item label="已还金额">{{ merchantDtl?.capitalRepaymentAmount ?? '—' }}元</a-descriptions-item>
        <a-descriptions-item label="待分账金额">{{
          merchantDtl?.capitalWaitAllocateAmount ?? '—'
        }}元</a-descriptions-item>
      </a-descriptions>
      <a-divider style="margin-bottom: 32px" />

      <div class="title">已授权模板列表</div>
      <a-table row-key="templateNo" :columns="columns" :data-source="merchantDtl.templateList">
        <span slot="isDefault" slot-scope="text">{{ text === 1 ? '是' : '否' }}</span>
        <span slot="action" slot-scope="text, record">
          <a @click="_authorizeTemp(record)">授权模板</a>
          <a-divider type="vertical" />
          <a @click="_delTemp(record)">删除</a>
        </span>
      </a-table>
      <create-form ref="createForm" :visible="visible" :loading="confirmLoading" @cancel="handleCancel" @ok="handleOk">
      </create-form>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { getMerchantDtl, authorizeTemp, delTemp } from '@/api/merchantManage'
import CreateForm from '../modules/CreateAuthorizeForm'
export default {
  components: {
    STable,
    CreateForm
  },
  data () {
    return {
      merchantId: '',
      contractNums: '',
      curTempNo: '',
      merchantDtl: {},
      visible: false,
      confirmLoading: false,
      columns: [
        {
          title: '模板编号',
          dataIndex: 'templateNo',
          key: 'templateNo',
          align: 'center'
        },
        {
          title: '合同名称',
          dataIndex: 'contractName',
          key: 'contractName',
          align: 'center'
        },
        {
          title: '是否默认',
          dataIndex: 'isDefault',
          key: 'isDefault',
          scopedSlots: { customRender: 'isDefault' },
          align: 'center'
        },
        {
          title: '模板已用次数',
          dataIndex: 'contractUsedNums',
          key: 'contractUsedNums',
          align: 'center'
        },
        {
          title: '模板可用次数',
          dataIndex: 'contractUnusedNums',
          key: 'contractUnusedNums',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center'
        }
      ]
    }
  },
  filters: {
    isDefaultFilter (text) {
      const isDefaultMap = {
        0: '否',
        1: '是'
      }
      return isDefaultMap[text]
    }
  },
  computed: {
    title () {
      return this.$route.meta.title
    }
  },
  methods: {
    /**
     * 授权模板
     */
    _authorizeTemp (record) {
      const form = this.$refs.createForm.authorizeForm
      form.resetFields()
      this.visible = true
      this.curTempNo = record.templateNo
    },
    /**
     * 删除模板
     */
    _delTemp (record) {
      this.$warning({
        title: '删除提示',
        content: `确认删除${record.userName}?`,
        okText: '确认',
        cancelText: '取消',
        destroyOnClose: true,
        closable: true,
        onOk: () => {
          delTemp({ merchantId: this.merchantId, templateNo: record.templateNo })
            .then((res) => {
              this.getMerchantData()
              this.$message.info('删除成功')
            })
            .catch((e) => {})
        }
      })
    },
    /**
     * 提交授权模板
     */
    handleOk () {
      const form = this.$refs.createForm.authorizeForm
      this.confirmLoading = true
      form.validateFields((errors, values) => {
        if (!errors) {
          authorizeTemp({
            merchantId: this.merchantId,
            templateNo: this.curTempNo,
            ...values
          })
            .then((res) => {
              this.visible = false
              this.confirmLoading = false
              this.contractNums = ''
              this.curTempNo = ''
              this.getMerchantData()
              this.$message.info('授权成功')
            })
            .catch((e) => {
              this.confirmLoading = false
            })
        } else {
          this.confirmLoading = false
        }
      })
    },
    /**
     * 取消授权模板
     */
    handleCancel () {
      this.visible = false
      this.contractNums = ''
      this.curTempNo = ''
    },
    /**
     * 获取详情
     */
    getMerchantData () {
      getMerchantDtl({ merchantId: this.merchantId })
        .then((res) => {
          this.merchantDtl = res.result
        })
        .catch((e) => {})
    }
  },
  mounted () {
    const { merchantId } = this.$route.params
    this.merchantId = merchantId
    this.getMerchantData()
  }
}
</script>

<style lang="less" scoped>
.title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}
.contractNums {
  display: flex;
  align-items: center;
  .contractNums__lab {
    width: 60px;
    margin-right: 20px;
    text-align: right;
  }
  .contractNums__text {
    width: calc(100% -80px);
  }
}
</style>
